<!doctype html>

<meta charset="utf-8">
<title>Process</title>
<script type="text/javascript" src="js/d3.v4.min.js" ></script>
<script type="text/javascript" src="js/dagre-d3.min.js" ></script>
<script type="text/javascript" src="js/jquery.min.js" ></script>

<style id="css">

    g.type-current > rect {
        fill: #1E9FFF;
    }
    g.type-success > rect {
        fill: green;
    }
    g.type-fail > rect {
        fill: red;
    }

    text {
        font-weight: 300;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
        font-size: 14px;
    }

    .node rect {
        stroke: #999;
        fill: #fff;
        stroke-width: 1.5px;
        color: red;
    }

    .edgePath path {
        stroke: #333;
        stroke-width: 1.5px;
    }
</style>

<svg id="svg-canvas"> <!--width=700 height=300--></svg>

<script >
  var topicId = sessionStorage.getItem('dataFlowTopicId');
  var dataFlow = {
    0: '起点',
    1: '提交审核',
    2: '审核通过',
    3: '审核未过',
    4: '课题已被选',
    5: '暂无学生选题',
    6: '提交开题报告材料',
    7: '开题审核通过',
    8: '开题审核未过',
    9: '提交一稿材料',
    10: '一稿审核通过',
    11: '一稿审核未过',
    12: '提交二稿材料',
    13: '二稿审核通过',
    14: '二稿审核未过',
    15: '提交三稿材料',
    16: '三稿审核通过',
    17: '三稿审核未过',
    18: '一辩未过',
    19: '一辩通过',
    20: '二辩未过 ',
    21: '二辩通过',
    22: '三辩未过 ',
    23: '三辩通过',
    24: '答辩结束'
  };
  // Create the input graph
  var g = new dagreD3.graphlib.Graph()
    .setGraph({})
    .setDefaultEdgeLabel(function() { return {}; });

    for (var i = 0; i < 24; i++) {
      g.setNode(i, {
        label:i+dataFlow[i],
        class: "type-no",
        id: "status"+i
      });
    }
    // g.setNode(20, {
    //   label: dataFlow[20],
    //   class:'type-no',
    //   id: 'status20'
    // });
  g.nodes().forEach(function(v) {
    var node = g.node(v);
    // Round the corners of the nodes
    node.rx = node.ry = 5;
  });

  // Set up edges, no special attributes.

//g.setEdge(0, 1);
//g.setEdge(1, 2);
//g.setEdge(1, 3);
//g.setEdge(2, 4);
//g.setEdge(2, 5);
//g.setEdge(3, 1);
//g.setEdge(4, 6);
//g.setEdge(6, 7);
//g.setEdge(6, 8);
//g.setEdge(8, 6);
//
//g.setEdge(7, 9);
//g.setEdge(9, 10);
//g.setEdge(9, 11);
//g.setEdge(11, 9);
//
//g.setEdge(10, 12);
//g.setEdge(12, 13);
//g.setEdge(12, 14);
//g.setEdge(14, 12);
//g.setEdge(13, 15);
//g.setEdge(15, 16);
//g.setEdge(15, 17);
//g.setEdge(17, 15);
//g.setEdge(16, 18);
//g.setEdge(16, 19);
//
//g.setEdge(18, 20);
//g.setEdge(18, 21);
//
//g.setEdge(20, 22);
//g.setEdge(20, 23);

  // g.setEdge(8, 10);
  // g.setEdge(8, 11);

  // g.setEdge(7, 20);
  // g.setEdge(9, 20);
  // g.setEdge(11, 20);

  // Create the renderer
  var render = new dagreD3.render();

  // Set up an SVG group so that we can translate the final graph.
  var svg = d3.select("svg"),
    svgGroup = svg.append("g");

  // Run the renderer. This is what draws the final graph.
  render(d3.select("svg g"), g);

//var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
//svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
//svg.attr("height", g.graph().height + 40);

</script>
<script>
//selectSuccess('0');
//handlerGet('/rest/topic/get/' + topicId, 'teacher', function (data) {
//  if (data.code === '0') {
//    // console.log(data.data);
//    var status = parseInt(data.data.status);
//    if (status === 0) {
//      return 0;
//    }
//    if (status >= 1) {
//      selectSuccess('1');
//    }
//    if(status>2 && status%2===1){
//      if(status < 7){
//        selectFail(status);
//      }else{
//        selectSuccess(status)
//      }
//    }
//    if (status === 2 || status > 3) {
//      selectSuccess(2);
//    }
//    if (status === 4 || status > 5) {
//      selectSuccess(4);
//    }
//    if (status >= 6) {
//      selectSuccess(6);
//    }
//    if (status >= 9) {
//      selectSuccess(9);
//    }
//    if (status >= 12) {
//      selectSuccess(12);
//    }
//    if (status >17) {
//      selectSuccess(16);
//    }
//    if (status >= 15) {
//      selectSuccess(15);
//    }
//    if (status>19) {
//      selectSuccess(18);
//    }
//    if (status > 21) {
//      selectSuccess(20);
//    }
//    if (status > 8) {
//      selectSuccess(7);
//    }
//    if (status > 11) {
//      selectSuccess(10);
//    }
//    if (status > 14) {
//      selectSuccess(13);
//    }
//    if (status === 8 || status === 11|| status === 14|| status === 17|| status === 22) {
//      selectFail( status);
//    }
//    if (status === 10 || status===18 || status===20) {
//      selectSuccess(status);
//    }
//    if(status===19  || status===21 || status===23){
//      selectPass(status);
//    }
//  }
//});
//
//function selectSuccess(name) {
//  document.getElementById("status" + name).setAttribute('class', 'type-current');
//}
//function selectFail(name) {
//  document.getElementById("status" + name).setAttribute('class', 'type-fail');
//}
//function selectPass(name) {
//  document.getElementById("status" + name).setAttribute('class', 'type-success');
//}
</script>